<template>
  <div>
  <draggable v-model="columnNames">
    <transition-group>
      <div v-for="element in columnNames" :key="element.uiFieldname">
        {{element.uiFieldname}}
      </div>
    </transition-group>
  </draggable>
</div>

</template>

<script>
  import draggable from 'vuedraggable'
  import { httpAction ,getAction} from '@/api/manage'


  export default {
    name: 'CodeFiledsView',
    components: {
      draggable,
    },
    data() {
      return {
        title: '视图信息',
        //表字段
        columnNames:[],
      }
    },
    created(){
      this.getColumnNames()
    },
    methods:{
      getColumnNames(){
        getAction("/generatecode/viewUiproperties/getColumnNames",{tableName:'sys_user'}).then(res => {
          if (res.success) {
            this.columnNames = res.result;
            console.log(this.columnNames)
          }
        })
      }
    }

  }
</script>

<style>
  .flip-list-move {
    transition: transform 0.5s;
  }

  .no-move {
    transition: transform 0s;
  }

  .ghost {
    opacity: 0.5;
    background: #c8ebfb;
  }

  .list-group {
    min-height: 20px;
  }

  .list-group-item {
    cursor: move;
  }

  .list-group-item i {
    cursor: pointer;
  }
</style>